<script setup>
import dayjs from 'dayjs';
import { Message, MessageBox } from 'element-ui';
import { map, some, cloneDeep } from 'lodash-es';
import {
  getProInfo,
  getMorProIndex,
  getTreeData,
  zbbgChange,
  submitIndexFile,
  getMorProHisTory,
  deleteLszb,
  getRecord,
} from '@/api/index.js';
import { useRequest, useWatch, useDownload } from '@/hooks';
import { useGlobalState } from '@/store/globalState.js';
import DataImport from '@/components/DataImport/index.vue';
import AIRecords from './AIRecords.vue';

const props = defineProps({
  enterprise: { type: Object, default: () => null },
  projectCode: { type: String, default: () => null },
});
const tree = ref(null);
const treeRef = ref(null);
const uploadUrl = ref(useGlobalState().globalState.serverUrl + '/energyservice/OverviewMonitor/importIndex');
const defaultProps = {
  // 默认设置
  children: 'children',
  label: 'name',
};
const submitForm = ref({
  checkYear: null,
  changeDate: null,
  areaIds: null,
  noteInfo: null,
  index: [],
});
const tableData = ref([]);
const dialogTable = ref([]);
const zbbgVisible = ref(false);
const dialogForm = ref({
  changeDate: null,
  areaIds: null,
  noteInfo: null,
  index: [],
});
const lszbVisible = ref(false);
const lsxgjlVisible = ref(false);
const lszbCheckYear = ref(null);
const pageObj = ref({
  pageSize: 2,
  pageNum: 1,
});
const pageObj2 = ref({
  pageSize: 2,
  pageNum: 1,
});
const xgjlCode = ref('');
const [res, loading, run] = useRequest(getMorProIndex, {
  manual: true,
  onSuccess: res => {
    submitForm.value.areaIds = res?.data?.areaIds;
    submitForm.value.changeDate = res?.data?.startTime;
    submitForm.value.noteInfo = res?.data?.noteInfo;
    tableData.value = cloneDeep(res?.data?.index);
    dialogTable.value = cloneDeep(res?.data?.index);
    dialogForm.value.areaIds = res?.data?.areaIds;
    dialogForm.value.changeDate = res?.data?.startTime;
    dialogForm.value.noteInfo = res?.data?.noteInfo;
    // if (res?.data?.index && res?.data?.index.lenght > 0) {
    //   tableData.value = res?.data?.index;
    // } else {
    //   const typeList = await getType();
    //   tableData.value = map(typeList, n => {
    //     let obj = {
    //       energyTypeInfo: `${n.energyName}（${n.energyUnit}）`,
    //       energyType: n.id,
    //       basisValue: null,
    //       guideValue: null,
    //       upperLimitValue: null,
    //     };
    //     return obj;
    //   });
    // }
  },
  onError: err => {},
});
const [buildData, loading2, buildRun] = useRequest(getTreeData, {
  manual: true,
});
const [yearList, , yaerRun] = useRequest(getProInfo, {
  manual: true,
  onSuccess: res2 => {
    if (!res2?.data?.complte) {
      submitForm.value = {
        checkYear: null,
        changeDate: null,
        areaIds: null,
        noteInfo: null,
        index: [],
      };
      tableData.value = [];
      res.value = null;
      MessageBox.confirm('请到“监测设置”模块设置监测服务年限、监测能源类型、合同金额…', {
        confirmButtonText: '确定',
        // cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {});
    } else {
      let result = res2.data?.yearList?.indexOf(dayjs().format('YYYY'));
      if (result > -1) {
        submitForm.value.checkYear = dayjs().format('YYYY');
      } else {
        submitForm.value.checkYear = res2.data?.yearList?.[0];
      }
      run({
        enterpriseCode: props.enterprise.enterpriseCode,
        projectCode: props?.projectCode,
        year: submitForm.value.checkYear,
      });
      // run({ enterpriseCode: props.enterprise.enterpriseCode, year: '2024' });
    }
  },
});
const [, , submitRun] = useRequest(submitIndexFile, {
  manual: true,
  onSuccess: res => {
    if (res.msg === '操作成功') {
      Message.success(res.msg);
      setTimeout(() => {
        tree.value?.setCheckedKeys([]);
        treeRef.value?.setCheckedKeys([]);
        run({
          enterpriseCode: props.enterprise.enterpriseCode,
          projectCode: props?.projectCode,
          year: submitForm.value.checkYear,
        });
      }, 10);
    }
  },
});
const [, , zbbgRun] = useRequest(zbbgChange, {
  manual: true,
  onSuccess: res => {
    if (res.msg === '操作成功') {
      Message.success(res.msg);
      zbbgCancel();
      setTimeout(() => {
        tree.value?.setCheckedKeys([]);
        treeRef.value?.setCheckedKeys([]);
        run({
          enterpriseCode: props.enterprise.enterpriseCode,
          projectCode: props?.projectCode,
          year: submitForm.value.checkYear,
        });
      }, 10);
    }
  },
});
const [lszbList, lszbLoading, lszbRun] = useRequest(getMorProHisTory, {
  manual: true,
});
const [, , deleteRun] = useRequest(deleteLszb, {
  manual: true,
  onSuccess: res => {
    if (res.msg === '操作成功') {
      Message.success(res.msg);
      pageObj.value = {
        pageSize: 2,
        pageNum: 1,
      };
      lszbRun({
        enterpriseCode: props.enterprise.enterpriseCode,
        projectCode: props.projectCode,
        year: lszbCheckYear.value,
        ...pageObj.value,
      });
    }
  },
});
const [recordData, loading3, xgjlRun] = useRequest(getRecord, {
  manual: true,
});

const handleUpload = (data, type) => {
  if (type === 1) {
    tableData.value = data ?? [];
  } else {
    dialogTable.value = data ?? [];
  }
};
const handleDownload = () => {
  useDownload('/energyservice/enProjectIndex/templateDownload', {});
};
const downloadData = type => {
  useDownload('/energyservice/OverviewMonitor/exportMorIndex', type === 1 ? tableData.value : [], `考核指标.xlsx`);
};
const downloadLszb = data => {
  if (data) useDownload('/energyservice/OverviewMonitor/exportMorIndex', data, `历史指标.xlsx`);
};
const currentChecked = (nodeObj, SelectedObj, type) => {
  if (type === 1) {
    submitForm.value.areaIds = SelectedObj.checkedKeys;
  } else {
    dialogForm.value.areaIds = SelectedObj.checkedKeys;
  }
};
const addRedStar = (h, { column }) => {
  return [h('span', { style: 'color: #F56C6C' }, '*'), h('span', ' ' + column.label)];
};
const changeYear = val => {
  MessageBox.confirm('切换考核年度，当前编辑内容将清除，是否确认却换', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning',
  })
    .then(() => {
      submitForm.value = {
        checkYear: val,
        changeDate: null,
        areaIds: null,
        noteInfo: null,
        index: [],
      };
      setTimeout(() => {
        tree.value.setCheckedKeys([]);
        run({ enterpriseCode: props.enterprise.enterpriseCode, projectCode: props?.projectCode, year: val });
      }, 10);
    })
    .catch(() => {});
};
const pickerOptions = computed(() => {
  return {
    disabledDate: time => {
      if (res.value?.lastTime?.length > 0) {
        return (
          dayjs(time) < dayjs(res.value.checkYear + '-' + res.value?.lastTime) ||
          dayjs(time) > dayjs(res.value.checkYear + '-' + res.value?.endTime)
        );
      }
    },
  };
});
const pickerOptions2 = computed(() => {
  return {
    disabledDate: time => {
      if (res.value?.startTime?.length > 0) {
        return (
          dayjs(time) < dayjs(res.value.checkYear + '-' + res.value?.startTime) ||
          dayjs(time) > dayjs(res.value.checkYear + '-' + res.value?.endTime)
        );
      }
    },
  };
});
const showZbbgButton = computed(() => {
  if (tableData.value?.[0]?.upperLimitValue < 1) {
    return true;
    // if (String(tableData.value[0].upperLimitValue).length > 0) {
    //   return false;
    // } else {
    //   return true;
    // }
  } else {
    return false;
  }
});
const handleSumbit = () => {
  if (submitForm.value?.checkYear?.length > 0 && submitForm.value.areaIds?.length > 0) {
    let SUBMIT = false;
    some(tableData.value, n => {
      for (let key in n) {
        if (key === 'basisValue' || key === 'guideValue' || key === 'upperLimitValue') {
          if (!n[key] || n[key].length === 0 || n[key] === 0) {
            SUBMIT = true;
            return true;
          } else {
            SUBMIT = false;
          }
        }
      }
    });
    if (SUBMIT) {
      if (!res.value?.dateType || res.value?.dateType === 'FIRST' || res.value?.dateType === 'LAST') {
        Message.error('考核年限、指标参数、关联区域为必填');
      } else if (res.value?.dateType === 'CHANGE') {
        Message.error('考核年限、变更时间、指标参数、关联区域为必填');
      }
    } else {
      let params = {
        enterpriseCode: props.enterprise?.enterpriseCode,
        projectCode: props?.projectCode,
        index: {
          ...submitForm.value,
          index: [],
        },
      };
      params.index.areaIds = submitForm.value.areaIds.toString();
      params.index.index = tableData.value;

      if (!res.value?.dateType || res.value?.dateType === 'FIRST' || res.value?.dateType === 'LAST') {
        MessageBox.confirm(
          '请确认信息无误，提交修改后，历史数据将从（文件未变更，展示<监测开始时间>或文件变更后，展示<变更时间>）重新计算',
          '提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          },
        )
          .then(() => {
            submitRun(params);
          })
          .catch(() => {});
      } else if (res.value?.dateType === 'CHANGE') {
        if (submitForm.value?.changeDate.length > 0) {
          MessageBox.confirm(
            '请确认信息无误，提交修改后，历史数据将从（文件未变更，展示<监测开始时间>或文件变更后，展示<变更时间>）重新计算',
            '提示',
            {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
              type: 'warning',
            },
          )
            .then(() => {
              submitRun(params);
            })
            .catch(() => {});
        } else {
          Message.error('考核年限、变更时间、指标参数、关联区域为必填');
        }
      }
    }
  } else {
    if (!res.value?.dateType || res.value?.dateType === 'FIRST' || res.value?.dateType === 'LAST') {
      Message.error('考核年限、指标参数、关联区域为必填');
    } else if (res.value?.dateType === 'CHANGE') {
      Message.error('考核年限、变更时间、指标参数、关联区域为必填');
    }
  }
};
const zbbgButton = () => {
  zbbgVisible.value = true;
  // dialogTable.value = map(tableData.value, n => {
  //   let obj = {
  //     energyType: n.energyType,
  //     energyTypeInfo: n.energyTypeInfo,
  //     basisValue: null,
  //     guideValue: null,
  //     upperLimitValue: null,
  //   };
  //   return obj;
  // });
};
const zbbgCancel = () => {
  // nextTick(() => {
  //   treeRef.value.setCheckedKeys([]);
  // });
  zbbgVisible.value = false;
  // run({ enterpriseCode: props.enterprise.enterpriseCode, year: submitForm.value.checkYear });
  // dialogForm.value = {
  //   changeDate: null,
  //   areaIds: [],
  //   noteInfo: null,
  //   index: [],
  // };
  // dialogTable.value = [];
};
const dialogSubmit = () => {
  if (dialogForm.value?.changeDate.length > 0 && dialogForm.value.areaIds?.length > 0) {
    let SUBMIT = false;
    some(dialogTable.value, n => {
      for (let key in n) {
        if (key === 'basisValue' || key === 'guideValue' || key === 'upperLimitValue') {
          if (!n[key] || n[key].length === 0) {
            SUBMIT = true;
            return true;
          } else {
            SUBMIT = false;
          }
        }
      }
    });
    if (SUBMIT) {
      Message.error('变更时间、指标参数、关联区域为必填');
    } else {
      MessageBox.confirm(
        '请确认信息无误，提交修改后，历史数据将从（文件未变更，展示<监测开始时间>或文件变更后，展示<变更时间>）重新计算',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      )
        .then(() => {
          let params = {
            enterpriseCode: props.enterprise?.enterpriseCode,
            projectCode: props.projectCode,
            index: {
              ...dialogForm.value,
              index: [],
            },
          };
          params.index.areaIds = dialogForm.value.areaIds.toString();
          params.index.checkYear = submitForm.value.checkYear;
          params.index.index = dialogTable.value;
          zbbgRun(params);
        })
        .catch(() => {});
    }
  } else {
    Message.error('变更时间、指标参数、关联区域为必填');
  }
};
const lszbButton = () => {
  lszbVisible.value = true;
  lszbCheckYear.value = submitForm.value.checkYear;
  lszbRun({
    enterpriseCode: props.enterprise.enterpriseCode,
    projectCode: props.projectCode,
    year: lszbCheckYear.value,
    ...pageObj.value,
  });
  // lszbRun({ enterpriseCode: props.enterprise.enterpriseCode, year: '2024', ...pageObj.value });
};
const lszbCancel = () => {
  lszbVisible.value = false;
  pageObj.value = {
    pageSize: 2,
    pageNum: 1,
  };
  lszbList.value = [];
};
const lszbChangeYear = val => {
  lszbRun({
    enterpriseCode: props.enterprise.enterpriseCode,
    projectCode: props.projectCode,
    year: lszbCheckYear.value,
    ...pageObj.value,
  });
};
const getList = e => {
  pageObj.value.pageNum = e.page;
  pageObj.value.pageSize = e.limit;
  lszbRun({
    enterpriseCode: props.enterprise.enterpriseCode,
    projectCode: props.projectCode,
    year: lszbCheckYear.value,
    ...pageObj.value,
  });
};
const getList2 = e => {
  pageObj2.value.pageNum = e.page;
  pageObj2.value.pageSize = e.limit;
  xgjlRun({ agreementCode: xgjlCode.value, ...pageObj2.value });
};
const lszbDelete = id => {
  MessageBox.confirm('删除文件，修改记录同步删除，不可找回，是否确认删除', '提示', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning',
  })
    .then(() => {
      if (id) deleteRun({ agreementCode: id });
    })
    .catch(() => {});
};
const showXgjl = id => {
  lsxgjlVisible.value = true;
  xgjlCode.value = id;
  xgjlRun({ agreementCode: id, ...pageObj2.value });
};
useWatch(
  () => props.enterprise,
  n => {
    if (n) {
      yaerRun({ enterpriseCode: n.enterpriseCode, projectCode: props?.projectCode });
      buildRun({ enterpriseCode: n.enterpriseCode });
    }
  },
  { deep: true, immediate: true },
);
onMounted(() => {
  // document.querySelector('.el-input__suffix').className += ' el-icon-date';
});
</script>
<template>
  <div class="u-h100">
    <div class="u-mt20 u-df-spb u-ml20">
      <div>
        考核年度：
        <el-select size="small" :value="submitForm.checkYear" class="u-mr10" style="width: 120px" @change="changeYear">
          <el-option v-for="item in yearList?.yearList ?? []" :key="item" :value="item" :label="item"></el-option>
        </el-select>
        <span class="red">*设置指标为年度全年的考核指标数据</span>
      </div>
      <div class="u-df-st">
        <DataImport
          :onlyShowBtn="true"
          :showIcon="false"
          :showTemDownload="false"
          impText="导入数据"
          title="数据"
          :uploadUrl="uploadUrl"
          :showResolve="false"
          class="u-ml10 u-mr10"
          :extraParams="{ enterPriceCode: enterprise?.enterpriseCode, year: submitForm.checkYear }"
          @handleFileSuccess="handleUpload($event, 1)"
        />
        <el-button class="u-ml5" size="small" type="primary" @click="handleDownload" plain>下载模板</el-button>
        <el-button size="small" type="primary" @click="downloadData(1)" plain>下载数据</el-button>
        <el-popover placement="top" trigger="hover" content="指标变更，历史考核指标将不可修改" popper-class="pop">
          <el-button
            class="popButton"
            slot="reference"
            size="small"
            type="primary"
            @click="zbbgButton"
            plain
            :disabled="showZbbgButton"
          >
            指标变更
          </el-button>
        </el-popover>
        <el-button size="small" type="primary" @click="lszbButton" plain>历史指标</el-button>
      </div>
    </div>
    <div class="ad-wrapper">
      <div class="khzb-left">
        <div class="title-top u-df-st">
          <span v-show="!res?.dateType || res?.dateType === 'FIRST'" class="u-primary">
            监测开始时间：{{ res?.startTime ?? '-' }}
          </span>
          <div v-show="res?.dateType === 'CHANGE'">
            <span class="red">*</span>
            变更时间：
            <el-date-picker
              size="small"
              popper-class="picker-dateNoneYear"
              v-model="submitForm.changeDate"
              placeholder="请选择"
              type="date"
              format="MM-dd"
              value-format="MM-dd"
              suffix-icon="el-icon-date"
              class="el-date-editor"
              style="width: 120px"
              :clearable="false"
              :picker-options="pickerOptions"
            />
            <span class="red">
              *上次变更时间:
              <span class="u-primary">{{ res?.lastTime ?? '-' }}</span>
              年度监测结束时间:
              <span class="u-primary">{{ res?.endTime ?? '-' }}</span>
            </span>
          </div>
          <span v-show="res?.dateType === 'LAST'" class="u-primary">监测结束时间: {{ res?.endTime ?? '-' }}</span>
        </div>
        <div style="height: calc(100% - 48px)">
          <el-table v-loading="loading" :data="tableData" height="100%" border>
            <el-table-column label="能耗类型" align="center" prop="energyTypeInfo">
              <template slot-scope="scope">
                {{ scope.row?.energyTypeInfo || scope.row?.energyType }}
              </template>
            </el-table-column>
            <el-table-column prop="upperLimitValue" label="约束值" align="center" :render-header="addRedStar">
              <template slot-scope="scope">
                <el-input-number
                  v-filter-input
                  v-model="scope.row.upperLimitValue"
                  clearable
                  size="small"
                  :precision="2"
                  :controls="false"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="basisValue" label="基准值" align="center" :render-header="addRedStar">
              <template slot-scope="scope">
                <el-input-number
                  v-filter-input
                  v-model="scope.row.basisValue"
                  clearable
                  size="small"
                  :precision="2"
                  :controls="false"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="guideValue" label="引导值" align="center" :render-header="addRedStar">
              <template slot-scope="scope">
                <el-input-number
                  v-filter-input
                  v-model="scope.row.guideValue"
                  clearable
                  size="small"
                  :precision="2"
                  :controls="false"
                ></el-input-number>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="khzb-right">
        <div class="title-top u-df-st">
          <span class="red">*</span>
          关联区域
        </div>
        <el-tree
          ref="tree"
          v-loading="loading2"
          :data="buildData ?? []"
          :props="defaultProps"
          :highlight-current="true"
          show-checkbox
          :default-checked-keys="submitForm.areaIds"
          @check="(nodeObj, SelectedObj) => currentChecked(nodeObj, SelectedObj, 1)"
          node-key="id"
          class="u-p20 mtree"
        >
          <span class="custom-tree-node u-fs14" slot-scope="{ node, data }">
            <!-- <ToolTip class="tree-lable u-pr20" :content="data.name" effect="dark" /> -->
            <span class="tree-lable u-pr20">{{ data.name }}</span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="u-ml20 u-mr20">
      <el-input
        type="textarea"
        :rows="3"
        placeholder="请输入内容"
        v-model="submitForm.noteInfo"
        maxlength="200"
      ></el-input>
    </div>
    <div class="u-p20 u-df-spb">
      <div>
        <span class="u-pr20">操作人：{{ res?.createBy ?? '-' }}</span>
        <span>操作时间：{{ res?.createTime ?? '-' }}</span>
      </div>
      <el-button size="small" type="primary" @click="handleSumbit">提交</el-button>
    </div>
    <el-dialog :visible.sync="zbbgVisible" :append-to-body="true" :before-close="zbbgCancel" width="90%">
      <div slot="title" class="dialog-title">
        <span class="tit u-prim-text">
          <span class="u-prim-text">指标变更</span>
          <span class="red u-fs14">*指标变更，历史指标数据不可编辑修改哦！</span>
        </span>
      </div>
      <div class="u-prim-text u-df-spb">
        <div>
          考核年度：
          <span class="u-primary u-pr20">{{ submitForm.checkYear }}</span>
          <span class="red">*设置指标为年度全年的考核指标数据</span>
        </div>
        <div class="u-df-st">
          <DataImport
            :onlyShowBtn="true"
            :showIcon="false"
            :showTemDownload="false"
            impText="导入数据"
            :showResolve="false"
            title="数据"
            :uploadUrl="uploadUrl"
            class="u-ml10 u-mr10"
            :extraParams="{ enterPriceCode: enterprise?.enterpriseCode, year: submitForm.checkYear }"
            @handleFileSuccess="handleUpload($event, 2)"
          />
          <el-button class="u-ml5" size="small" type="primary" @click="handleDownload" plain>下载模板</el-button>
          <el-button size="small" type="primary" @click="downloadData(2)" plain>下载数据</el-button>
        </div>
      </div>
      <div class="ad-wrapper u-prim-text">
        <div class="khzb-left">
          <div class="title-top u-df-st">
            <!-- <span v-show="!res?.dateType || res?.dateType === 'FIRST'" class="u-primary">
              监测开始时间：{{ res?.startTime ?? '-' }}
            </span> -->
            <div>
              <span class="red">*</span>
              变更时间：
              <el-date-picker
                size="small"
                popper-class="picker-dateNoneYear"
                v-model="dialogForm.changeDate"
                placeholder="请选择"
                type="date"
                format="MM-dd"
                value-format="MM-dd"
                suffix-icon="el-icon-date"
                class="el-date-editor"
                style="width: 120px"
                :clearable="false"
                :picker-options="pickerOptions2"
              />
              <span class="red">
                *上次变更时间:
                <span class="u-primary">{{ res?.lastTime ?? '-' }}</span>
                年度监测结束时间:
                <span class="u-primary">{{ res?.endTime ?? '-' }}</span>
              </span>
            </div>
            <!-- <span class="red">*</span>
            变更时间：
            <el-date-picker
              size="small"
              popper-class="picker-dateNoneYear"
              v-model="dialogForm.changeDate"
              placeholder="请选择"
              type="date"
              format="MM-dd"
              value-format="MM-dd"
              suffix-icon="el-icon-date"
              class="el-date-editor"
              style="width: 120px"
              :clearable="false"
              :picker-options="pickerOptions"
            />
            <span class="red">
              *上次变更时间:
              <span class="u-primary">{{ res?.startTime ?? '-' }}</span>
              年度监测结束时间:
              <span class="u-primary">{{ res?.endTime ?? '-' }}</span>
            </span> -->
          </div>
          <el-table v-loading="loading" :data="dialogTable" :height="320" border>
            <el-table-column label="能耗类型" align="center" prop="energyTypeInfo">
              <template slot-scope="scope">
                {{ scope.row?.energyTypeInfo || scope.row?.energyType }}
              </template>
            </el-table-column>
            <el-table-column prop="upperLimitValue" label="约束值" align="center" :render-header="addRedStar">
              <template slot-scope="scope">
                <el-input-number
                  v-filter-input
                  v-model="scope.row.upperLimitValue"
                  clearable
                  size="small"
                  :precision="2"
                  :controls="false"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="basisValue" label="基准值" align="center" :render-header="addRedStar">
              <template slot-scope="scope">
                <el-input-number
                  v-filter-input
                  v-model="scope.row.basisValue"
                  clearable
                  size="small"
                  :precision="2"
                  :controls="false"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="guideValue" label="引导值" align="center" :render-header="addRedStar">
              <template slot-scope="scope">
                <el-input-number
                  v-filter-input
                  v-model="scope.row.guideValue"
                  clearable
                  size="small"
                  :precision="2"
                  :controls="false"
                ></el-input-number>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="khzb-right" style="height: 370px">
          <div class="title-top u-df-st">
            <span class="red">*</span>
            关联区域
          </div>
          <el-tree
            ref="treeRef"
            v-loading="loading2"
            :data="buildData ?? []"
            :props="defaultProps"
            :highlight-current="true"
            show-checkbox
            :default-checked-keys="dialogForm.areaIds"
            @check="(nodeObj, SelectedObj) => currentChecked(nodeObj, SelectedObj, 2)"
            node-key="id"
            class="u-p20 mtree"
          >
            <span class="custom-tree-node u-fs14" slot-scope="{ node, data }">
              <!-- <ToolTip class="tree-lable u-pr20" :content="data.name" effect="dark" /> -->
              <span class="tree-lable u-pr20">{{ data.name }}</span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="u-ml20 u-mr20">
        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="dialogForm.noteInfo"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="zbbgCancel" type="primary" plain>取 消</el-button>
        <el-button type="primary" size="small" @click="dialogSubmit">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="lszbVisible" :append-to-body="true" :before-close="lszbCancel" width="90%">
      <div slot="title" class="dialog-title">
        <span class="tit u-prim-text">
          <span class="u-prim-text">历史指标</span>
          <span class="red u-fs14">
            *可查看历史考核指标记录，并可对当前考核指标及所有历史考核指标进行逐个删除操作，删除后重新计算历史指标数据。
          </span>
        </span>
      </div>
      <div class="u-prim-text u-df-spb">
        <div>
          考核年度：
          <el-select size="small" v-model="lszbCheckYear" class="u-mr10" style="width: 120px" @change="lszbChangeYear">
            <el-option v-for="item in yearList?.yearList ?? []" :key="item" :value="item" :label="item"></el-option>
          </el-select>
          <span class="red">*设置指标为年度全年的考核指标数据</span>
        </div>
      </div>
      <div v-for="(item, index) in lszbList?.rows ?? []" :key="item.startTime">
        <div class="u-df-st u-df-ed">
          <el-button class="u-ml5" size="small" type="primary" @click="downloadLszb(item.index)" plain>
            下载数据
          </el-button>
          <!-- <el-button
            v-show="index === 0"
            class="u-ml5"
            size="small"
            type="primary"
            plain
            @click="lszbDelete(item?.agreementCode)"
          >
            删除
          </el-button> -->
          <el-button size="small" type="primary" plain @click="showXgjl(item?.agreementCode)">修改记录</el-button>
        </div>
        <AIRecords :data="[item]" :buildData="buildData" />
      </div>
      <div v-show="lszbList?.rows?.length < 1" style="height: 500px; width: 100%; text-align: center">暂无数据</div>
      <pagination
        v-if="lszbList?.total > 0"
        :total="lszbList?.total ?? 0"
        :page.sync="pageObj.pageNum"
        :limit.sync="pageObj.pageSize"
        @pagination="getList"
        :pageSizes="[2, 5, 10]"
      />
    </el-dialog>
    <el-dialog
      :visible.sync="lsxgjlVisible"
      title="考核指标修改记录"
      :append-to-body="true"
      :before-close="() => (lsxgjlVisible = false)"
      width="90%"
    >
      <AIRecords :showYear="true" :data="recordData?.rows ?? []" :buildData="buildData" />
      <div class="u-df-spb">
        <el-button size="small" type="primary" @click="() => (lsxgjlVisible = false)">返回</el-button>
        <pagination
          v-if="recordData?.total > 0"
          :total="recordData?.total ?? 0"
          :page.sync="pageObj2.pageNum"
          :limit.sync="pageObj2.pageSize"
          :pageSizes="[2, 5, 10]"
          @pagination="getList2"
        />
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.ad-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 20px;
  height: calc(100% - 220px);
  .title-top {
    width: 100%;
    padding-left: 20px;
    height: 48px;
  }
  .khzb-left {
    width: calc(60% + 22px);
    margin-right: 20px;
    height: 100%;
  }
  .khzb-right {
    width: calc(40% - 22px);

    height: 100%;
    overflow-y: scroll;
    .title-top {
      border-bottom: 1px solid #374468;
    }
  }
}
.app-dark {
  .khzb-left {
    .title-top {
      background: #242b41;
      border: 1px solid #374468;
      border-bottom: none;
    }
  }
  .khzb-right {
    border: 1px solid #374468;
    .title-top {
      background: #242b41;
      border-bottom: 1px solid #374468;
    }
  }
}
.app-light {
  .khzb-left {
    .title-top {
      background: #f5f7fa;
      border: 1px solid #eee;
      border-bottom: none;
    }
  }
  .khzb-right {
    border: 1px solid #eee;
    .title-top {
      background: #f5f7fa;
      border-bottom: 1px solid #eee;
    }
  }
}
.red {
  color: #ff0000;
}
.popButton {
  margin-left: 10px !important;
  margin-right: 10px !important;
}
.mtree {
  height: calc(100% - 48px);
  overflow-y: scroll;
}
</style>
